<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>online rpc list</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-menu :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
        <el-menu-item>
            <a href="#"><el-image src="/favicon.ico" style="margin-top: 13px;" /></a>
        </el-menu-item>
        <el-menu-item index="1">RPC SERVER</el-menu-item>
    </el-menu>

    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="name"
                label="clientName"
                width="180">
        </el-table-column>
        <el-table-column
            label="address"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">
                    TCP: {{ scope.row.tcpHost.host }}: {{ scope.row.tcpHost.port }}
                </span>
                <span style="margin-left: 10px">
                    HTTP: {{ scope.row.httpHost.host }}: {{ scope.row.httpHost.port }}
                </span>
            </template>
        </el-table-column>
        <el-table-column
                label="status"
        >
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" style="margin-left: 10px">{{ scope.row.status === 1 ? 'success' : 'finish' }}</el-tag>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data(){
            return {
                activeIndex: "1",
                tableData: []
            }
        },
        mounted() {
            this.getRpcList()
        },

        methods: {
            getRpcList: function () {
                axios.request({
                    url: '/rpc/rpc_client_list'
                }).then(res => {
                    this.tableData = res.data.items
                })
            }
        }
    })
</script>

<style lang="scss">
    body {
        padding: 0;
        margin: 0;
    }
</style>

</html>